<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  <title>The source code</title>
    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body  onload="prettyPrint();">
    <pre class="prettyprint lang-js"><div id="cls-Ext.Media"></div>/**
 * @class Ext.Media
 * @extends Ext.Container
 *
 * <p>Provides a base class for audio/visual controls. Should not be used directly.</p>
 * @xtype media
 */
Ext.Media = Ext.extend(Ext.Component, {
    <div id="method-Ext.Media-"></div>/**
     * @constructor
     * @param {Object} config
     * Create a new Media component.
     */

    <div id="cfg-Ext.Media-url"></div>/**
     * @cfg {String} url
     * Location of the media to play.
     */
    url: '',

    <div id="cfg-Ext.Media-enableControls"></div>/**
     * @cfg {Boolean} enableControls
     * Set this to false to turn off the native media controls 
     * (Defaults to true).
     */
    enableControls: true,
    
    <div id="cfg-Ext.Media-autoResume"></div>/**
     * @cfg {Boolean} autoResume
     * Will automatically start playing the media when the container is activated.
     * (Defaults to false)
     */
    autoResume: false,

    <div id="cfg-Ext.Media-autoPause"></div>/**
     * @cfg {Boolean} autoPause
     * Will automatically pause the media when the container is deactivated.
     * (Defaults to true)
     */
    autoPause: true,

    <div id="cfg-Ext.Media-preload"></div>/**
     * @cfg {Boolean} preload
     * Will begin preloading the media immediately.
     * (Defaults to true)
     */
    preload: true,

    // @private
    playing: false,

    // @private
    afterRender : function() {
        var cfg = this.getConfiguration();
        Ext.apply(cfg, {
            src: this.url,
            preload: this.preload ? 'auto' : 'none'
        });
        if(this.enableControls){
            cfg.controls = 'controls';
        }
        if(this.loop){
            cfg.loop = 'loop';
        }
        <div id="prop-Ext.Media-media"></div>/**
         * A reference to the underlying audio/video element.
         * @property media
         * @type Ext.Element
         */
        this.media = this.el.createChild(cfg);
        Ext.Media.superclass.afterRender.call(this);
        
        this.on({
            scope: this,
            activate: this.onActivate,
            beforedeactivate: this.onDeactivate
        });
    },
    
    // @private
    onActivate: function(){
        if (this.autoResume && !this.playing) {
            this.play();
        }
    },
    
    // @private
    onDeactivate: function(){
        if (this.autoPause && this.playing) {
            this.pause();
        }
    },

    <div id="method-Ext.Media-play"></div>/**
     * Starts or resumes media playback
     */
    play : function() {
        this.media.dom.play();
        this.playing = true;
    },

    <div id="method-Ext.Media-pause"></div>/**
     * Pauses media playback
     */
    pause : function() {
        this.media.dom.pause();
        this.playing = false;
    },

    <div id="method-Ext.Media-toggle"></div>/**
     * Toggles the media playback state
     */
    toggle : function() {
        if(this.playing){
            this.pause();    
        }
        else {
            this.play();
        }
    }
});

Ext.reg('media', Ext.Media);</pre>    
</body>
</html>